<template>
  <a-modal
    :width="850"
    :visible="visible"
    :title="title"
    :confirmLoading="confirmLoading"
    @ok="handleCancel"
    @cancel="handleCancel"
    cancelText="取消">

    <div class="video-view" v-if="visible">
      <div id="dplayer" style="width:100%;height:100%" ></div>
      <!--<video  id="videoPlayer" style="width:100%;height:100%" class="video-js"></video>-->
    </div>
  </a-modal>
</template>

<script>
  import DPlayer from 'dplayer';
  export default {
    name: 'VideoPlayModal',

    data () {
      return {
        title:"视频播放",
        visible:false,

        confirmLoading:false,
        options: {


          preload: 'auto', // 预加载
          controls: true // 显示播放的控件
        },
        player: null
      }
    },

    methods:{
      initPlayer(url){

        let Hls = require('hls.js');
        let t = this;

        const dp = new DPlayer({
          element: document.getElementById('dplayer'), // 可选，player元素
          autoplay: false, // 可选，自动播放视频，不支持移动浏览器
          theme: '#fe628e', // 可选，主题颜色，默认: #b7daff
          lang: 'zh-cn',
          // 可选，语言，`zh'用于中文，`en'用于英语，默认：Navigator
          // language
          screenshot: true,
          hotkey: true, // 可选，绑定热键，包括左右键和空格，默认值：true
          preload: 'auto', // 可选，预加载的方式可以是'none''metadata''auto'，默认
          //值：'auto'
          video: { // 必需，视频信息
            url: url,
            type: url.indexOf("m3u8")>=0?'customHls':'auto',
            customType: {
              customHls: function(video, player) {
                const hls = new Hls();
                hls.loadSource(
                  url
                );
                hls.attachMedia(video);
              },
            },
          },


        });

        dp.play()


      },

      show(url){
        this.visible = true;
        this.confirmLoading = true;
        let t = this
        this.$nextTick(()=>{
          t.initPlayer(url)
          this.confirmLoading = false;
        })

      },
      getVideo(nowPlayVideoUrl) {

        this.player = this.$video('videoPlayer', this.options)
        // 关键代码， 动态设置src，才可实现换台操作
        //不动态设置依然也可以这样写
        this.player.src([
          {
            src: nowPlayVideoUrl,

          }
        ])
        this.player.play();
      },
      handleCancel(){
        this.visible = false;
        if(this.player){
          this.player.dispose();
          this.player = null;
        }

      }
    }
  }
</script>

<style scoped>
  .video-view{
    height: 600px;
    width: 800px;
  }
</style>